<script setup>
import draggable from "vuedraggable";
import CustomCheckbox from '../components/customizeComponent/CustomCheckbox.vue'
import CustomRadio from '../components/customizeComponent/CustomRadio.vue'
import CustomDatePicker from '../components/customizeComponent/CustomDatePicker.vue'
import CustomInput from '../components/customizeComponent/CustomInput.vue'
import CustomSelect from '../components/customizeComponent/CustomSelect.vue'
import CustomFile from '../components/customizeComponent/CustomFile.vue'
import useStore from '@/stores';
import { storeToRefs } from 'pinia'
const { customizeStore } = useStore()
const { formList } = storeToRefs(customizeStore)
const emit = defineEmits(['selectedComponent', 'deleteComponent'])
const props = defineProps({
  formInfo: {
    type: Object,
    default: {}
  }
})
import { saveFormDataAsync, deployFormAysnc } from '@/api/flowManagement'
import { ElMessage } from "element-plus";

//中间组件表单
const componetFormRef = ref(null)

// 浅包装响应式
const customizeComponent = shallowRef({ CustomCheckbox, CustomRadio, CustomDatePicker, CustomInput, CustomSelect, CustomFile })

//点击组件编辑
const selectedComponent = (item) => {
  const selectedItem = {
    name: item.componentName,
    id: item.id,
    option: item.option,
  }
  emit('selectedComponent', selectedItem)
}

//删除组件
const deleteComponent = (val) => {
  formList.value = formList.value.filter(item => {
    return item.id !== val.id
  })

  emit('deleteComponent', val)
}

//监听formList 给新的item的自定义组件重新注册
watch(() => formList, (val) => {
  val.value.map(item => {
    if (!item.component.setup && Object.hasOwn(customizeComponent.value, item.componentName)) {
      item.component = customizeComponent.value[item.componentName]
    }
  })
},
  {
    deep: true
  })

const hasform = computed(() => formList.value.length)

//表单的标题
// const formTitle = ref('')

//保存表单订制
const saveFormList = async () => {
  try {
    const formInfo = props.formInfo
    const id = props.formInfo.formRepresentation.id
    console.log('%c [  ]-69', 'font-size:13px; background:pink; color:#bf2c9f;', formInfo)
    formInfo.formRepresentation.formDefinition.fields = formList.value.map(item => {
      return {
        'fieldType': 'FormField',
        id: item.fieldName,
        name: item.label,
        type: item.$attrs.type || '',
        value: item.value,
        required: item.required,
        readOnly: false,
        overrideId: true,
        placeholder: item.$attrs.placeholder,
        layout: null,
        params: {},
      }
    })
    const res = await saveFormDataAsync(id, formInfo)
    if (res) {
      ElMessage.success('保存成功！正在部署,请稍等！')
      const params = {
        formId: res.id,
        formKey: res.key,
        json: JSON.stringify(formList.value)
      }
      const deployRes = await deployFormAysnc(params)
      if (deployRes && deployRes.code + '' === '200') {
        ElMessage.success('部署成功！')
        router.push({ name: 'flowList' })
      }
    }
  } catch (error) {
    console.log('%c [ error ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}


</script>

<template>
  <div class="area-container">
    <el-card>
      <!-- <template #header>
        <div class="card-header">
          <el-input v-model="formTitle" placeholder="点击这里，请输入表单的标题" />
        </div>
      </template> -->
      <el-scrollbar height="65vh">
        <el-form :model="form" ref="componetFormRef">
          <draggable :list="formList" item-key="id" class="list-group" ghost-class="ghost" @start="dragging = true"
            @end="dragging = false" :group="{ name: 'form' }" animation="300">
            <template #item="{ element }">
              <el-form-item :label="element.label" label-width="100px">
                <div class="component-item">
                  <component class="component" :is="element.component" v-bind="element.$attrs"></component>
                  <div class="btn-group">

                    <el-tooltip class="box-item" effect="dark" content="编辑该组件" placement="bottom">
                      <el-button class="edit-btn" type="warning" circle plain @click="selectedComponent(element)">
                        <el-icon style="vertical-align: middle">
                          <Edit />
                        </el-icon></el-button>
                    </el-tooltip>

                    <el-tooltip class="box-item" effect="dark" content="删除该组件" placement="bottom">
                      <el-button class="delete-btn" type="danger" circle plain @click="deleteComponent(element)">
                        <el-icon style="vertical-align: middle">
                          <Delete />
                        </el-icon>
                      </el-button>
                    </el-tooltip>
                  </div>
                </div>
              </el-form-item>
            </template>
          </draggable>
          <el-empty v-if="!hasform">
            <template #description>
              <span>将左侧组件拖到这！</span>
            </template>
            <template #image>
              <el-icon size="40">
                <TopLeft />
              </el-icon>
            </template>
          </el-empty>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="card-footer">
          <el-button class="btn-green" type="primary" @click="saveFormList">保存</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>



<style lang="scss" scoped>
.area-container {
  height: 100%;

  .card-header {
    :deep(.el-input__wrapper) {
      border: 0px;
      box-shadow: 0 0 0 0;
    }

    :deep(.el-input__inner) {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      color: #5e5e5e;
    }
  }

  .card-footer {
    display: flex;
    justify-content: flex-end;

    :deep(.el-button) {
      color: #fff;
      width: 100px;
      height: 35px;
      font-size: 16px;
      border-color: #c6c6c6;
    }
  }

  .component-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;

    .component {
      margin-right: auto;

    }

    .btn-group {
      margin-left: auto;
    }
  }


  :deep(.el-form-item) {
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
    padding: 5px 15px;
    border: 1px solid #9898986e;
    border-radius: 5px;
    align-items: center;
    margin-bottom: 10px;

  }

  :deep(.el-form-item__label) {
    margin-bottom: auto;
  }

  :deep(.el-form-item__content) {
    flex: 1;
  }

  :deep(.el-card) {
    height: 100%;
    padding: 10px 20px;
  }

  :deep(.el-card__body) {
    height: inherit;
  }


  :deep(.el-form) {
    height: inherit;
  }

  :deep(.el-empty__description) {
    color: #aeacac;
    font-weight: 700;
    font-style: italic;

    span {
      font-size: 20px;

    }
  }

}
</style>